<!doctype html>
<html>
    <head>
        <link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
        <script>
            $(function () {

                $("#MyDialog").dialog({
                    autoOpen: false,
                    height: 300,
                    width: 350,
                    modal: true,
                    buttons: {
                        "Save": function () {
                            $('#name').val($('#firstname').val() + " " + $('#lastname').val());
                            $(this).dialog("close");
                        },
                        "Cancel": function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function () {
                        $('#firstname').val("");
                        $('#lastname').val("");
                    }
                });

                $("#name").click(function () { $("#MyDialog").dialog("open"); });
            });

            function onrowclik(para) {

                $("#MyDialog").data('mydata', para).dialog("open");
                var data = $('#MyDialog').data('mydata');
                //alert(data);

                $("#firstname").val(data);

            }
        </script>
            
    </head>
    <body>
        <div id="MyDialog" title="Create Name">

            FirstName: <input type="text" id="firstname" />
            LastName: <input type="text" id="lastname" />


        </div>
        <div>
            Name: <input type="text" id="name" />
        </div>

        <table>
        <thead>
            <tr>
                <th>Code</th>
                <th>Company</th>
                <th class="numeric">Price</th>
                <th class="numeric">Change</th>
                <th class="numeric">Change %</th>
                <th class="numeric">Open</th>
                <th class="numeric">High</th>
                <th class="numeric">Low</th>
                <th class="numeric">Volume</th>
            </tr>
        </thead>
            <tbody>
                <tr>
                    <td data-title="Code" ><input type=number id="txt1" min=0.5 value=1   ></td>
                    <td data-title="Company" onclick="onrowclik($('#txt1').val())" >AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
                    <td data-title="Price" class="numeric">$1.38</td>
                    <td data-title="Change" class="numeric">-0.01</td>
                    <td data-title="Change %" class="numeric">-0.36%</td>
                    <td data-title="Open" class="numeric">$1.39</td>
                    <td data-title="High" class="numeric">$1.39</td>
                    <td data-title="Low" class="numeric">$1.38</td>
                    <td data-title="Volume" class="numeric">9,395</td>
                </tr>
            </tbody> 
        </table> 

    </body>
</html>
  